/**
 *
 * Copyright 2016-present scrm
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
import React from 'react';
import { Image, Text, TouchableOpacity, View, StyleSheet } from 'react-native';
import moment from 'moment';

import { formatStringWithHtml } from '../../utils/FormatUtil';
import { joinWithValue } from '../../utils/ItemsUtil';
import colors from '../../config/colors';
import Popover, { PopoverTouchable } from 'react-native-modal-popover';
// import MemberPopover from '../popover/Member'
let expander1, expander2;
const visible1 = false, visible2 = false

require('moment/locale/zh-cn');

const TeamItemCell = ({ 
  team, 
  onPressHandler, 
  type, 
  data, 
  expanderVisible,
  onManageExpand,
  onPressItemHandler 
}) => (
  <TouchableOpacity onPress={() => onPressHandler(team)}>
    <View style={styles.containerItem}>
      { team.team_managers.length && team.team_managers[0].headimgurl &&
        <Image resizeMode="cover" style={styles.itemImg} source={{ uri: team.team_managers[0].headimgurl}} />
        ||
        <View style={styles.imageHolder}>
          <Text style={styles.imageHolderTextStyle}>{team.team_name}</Text>
        </View>
      }
      <View style={styles.itemRightContent}>
        <Text style={styles.title}>{team.team_name}</Text>
        <View style={styles.itemRightBottom}>
          <View style={styles.rightBottomItem}>
            <Text 
            numberOfLines={1} 
            ellipsizeMode="tail" 
            style={styles.userName}>主管:{team.team_managers.length ? joinWithValue(team.team_managers, 'name') : '暂无'}
            </Text>
          </View>
          <View style={styles.rightBottomItem}>
            <Text numberOfLines={1} ellipsizeMode="tail" style={styles.userName}>成员:{team.team_members.length ? joinWithValue(team.team_members, 'name')  : '暂无'}</Text>
          </View>
        </View>
      </View>
    </View>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  containerItem: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fcfcfc',
    padding: 10,
    paddingRight: 5,
    borderBottomColor: '#ddd',
    borderBottomWidth: 1
  },
  title: {
    fontSize: 18,
    textAlign: 'left',
    color: 'black'
  },
  itemImg: {
    width: 88,
    height: 70,
    marginRight: 10
  },
  itemRightContent: {
    flex: 1,
    flexDirection: 'column'
  },
  itemRightBottom: {
    flex: 1,
    flexDirection: 'column'
  },
  rightBottomItem: {
    flex: 1,
    flexDirection: 'row'
  },
  userName: {
    flex: 1,
    fontSize: 14,
    marginTop: 5,
    marginRight: 5
  },
  expander: {
    paddingRight: 5,
    paddingTop: 5,
    paddingLeft: 5,
    color: colors.grey6
  },
  activeExpander: {
    color: '#3e9ce9'
  },
  content: {
    padding: 16,
    borderRadius: 8,
  },
  arrow: {
  
  },
  background: {
    backgroundColor: 'rgba(0, 0, 255, 0.5)'
  },
  imageHolder: {
    width: 88,
    height: 70,
    marginRight: 10,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: colors.blue4,
  },
  imageHolderTextStyle: {
    textAlign: 'center',
    color: 'white'
  }
});

export default TeamItemCell;
